<template>
  <el-date-picker v-model="dataForm[attrName]"
                  :type="dateType"
                  :start-placeholder="startPlaceholder"
                  :end-placeholder="endPlaceholder"
                  :clearable="clearable"
                  :placeholder="placeholder"
                  :unlink-panels="unlinkPanels"
                  :picker-options="pickerOptions"
                  :value-format="valueFormat"
                  @change="changedCallback"
                  @input="forceUpdate"
  >
  </el-date-picker>
</template>

<script>
import basicMixins from './basicMixins'

export default {
  name: 'normalDate',
  mixins: [basicMixins],
  props: {
    unlinkPanels: {
      type: Boolean,
      default: true
    },
    clearable: {
      type: Boolean,
      default: false
    },
    dateType: {
      type: String,
      default: 'date'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd HH:mm:ss'
    },
    dateFormat: {
      type: String,
      default: 'yyyy 年 MM 月 dd 日 HH 时 mm 分 ss 秒'
    },
    startPlaceholder: {
      type: String,
      default: '开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '结束日期'
    },
    changedCallback: {
      type: Function,
      default: () => {
      }
    }
  },
  methods: {
    forceUpdate() {
      this.$forceUpdate()
    }
  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          },

        },
          {
            text: '一月后',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 31)
              picker.$emit('pick', date)
            },
          }
          ]
      }
    }
  }
}
</script>

<style scoped>

</style>
